<template>
  <div>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" offset="10">
        <!-- <van-cell v-for="item in list" :key="item.id" :title="item.name" label="开关表示是否允许修改期初库存">
          <template>
            <van-switch :value="item.check" size="20px" @input="updateShopDetail(item)" />
          </template>
</van-cell> -->
        <van-collapse v-model="activeNames" :accordion="true">
          <van-collapse-item :name="item.id" v-for="item in list">
            <template #title>
              <div>{{ item.name }}</div>
            </template>
            <div>
              <div style="display: flex;justify-content: space-between;margin-bottom: 5px;">
                <span>是否允许修改期初库存</span>
                <van-switch :value="item.check" size="20px" @input="updateShopDetail(item)" />
              </div>
              <div style="display: flex;justify-content: space-between;margin-bottom: 5px;">
                <span>门店账号</span>
                <span>{{ item.userName }}</span>
              </div>
              <div style="display: flex;justify-content: space-between;margin-bottom: 5px;">
                <span>商户号</span>
                <span>{{ item.merchantId }}</span>
              </div>
            </div>
          </van-collapse-item>
        </van-collapse>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getShopList, updateShopDetail } from '@/api/user'
import { Toast } from 'vant';
export default {
  name: "Home",
  data() {
    return {
      list: [],
      activeNames: [],
      loading: false,
      finished: false,
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      refreshing: false,
    }
  },
  mounted() {
    this.storeList();
  },
  methods: {
    async storeList() {
      this.loading = true;
      let res = await getShopList({ ...this.page });
      if (res.code === 200) {
        const data = res.data
        let arr = [...this.list, ...data.list];
        const map = new Map();
        let newArr = arr.filter(v => !map.has(v.id) && map.set(v.id, v));
        newArr = newArr.map(item => {
          return {
            ...item,
            check: item.initialState == '0' ? true : false
          }
        })
        this.list = newArr;
        // this.goodsList = [...this.goodsList, ...data.list]
        // 去重
        this.loading = false;
        if (res.data.isLastPage) {
          this.finished = true;
        }
      }
    },
    onRefresh() {
      this.refreshing = true;
      this.list = [];
      this.page = {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      }
      this.finished = false;
      this.storeList();
      this.refreshing = false;
    },
    onLoad() {
      this.page.pageNum++;
      this.storeList();
    },
    async updateShopDetail(data) {
      const initialState = data.check ? '1' : '0';
      const res = await updateShopDetail({
        initialState,
        id: data.id
      });
      if (res.code === 200) {
        Toast.success('修改成功');
        const index = this.list.findIndex(item => item.id === data.id);
        if (index !== -1) {
          this.list[index].initialState = initialState;
          this.list[index].check = initialState == '0' ? true : false;
          console.log(this.list[index].initialState);

        }
      }
    }
  },
}
</script>

<style lang="scss" scoped></style>